<template>
  <el-dialog v-model="show" width="1000px" title="订单详情" append-to-body :close-on-click-modal="true">
    <table class="table" cellspacing="0" cellpadding="0">
      <tr>
        <th>饭店名称</th>
        <td>{{ fdInfo.name }}</td>
      </tr>
      <tr>
        <th>饭店地址</th>
        <td>{{ fdInfo.addName }}</td>
      </tr>
      <tr>
        <th>食品名称</th>
        <td>
          <p v-for="f in foodList" v-show="f.num>0" :key="f.arfId">
            {{ f.name }}({{ f.categoryName }})  {{ f.num }} * ￥{{ f.price?.toFixed(2) }}
          </p>
        </td>
      </tr>
      <tr>
        <th>送餐地址</th>
        <td>{{ orderInfo.deliveryAddress }}</td>
      </tr>
      <tr>
        <th>送餐时间</th>
        <td>{{ orderInfo.deliveryTime }}</td>
      </tr>
      <tr>
        <th>联系电话</th>
        <td>{{ orderInfo.phone }}</td>
      </tr>
      <tr>
        <th>备注</th>
        <td>
          {{ orderInfo.remarks||'无' }}
        </td>
      </tr>
    </table>

    <el-row style="background: #f8f8f8;padding: 10px">
      <el-col :span="12">
        <p>订单编号：{{ orderInfo.id }}</p>
        <!--        <p>下单账号：{{orderInfo.id}}</p>-->
        <!--        <p>下单时间：{{orderInfo.id}}</p>-->
        <!--        <p>付款账号：{{orderInfo.payId}}</p>-->
        <div>总计：￥ {{ orderInfo.total?.toFixed(2) }}</div>
      </el-col>
      <el-col :span="12">
        <p v-if="orderInfo.status=='1'">付款时间：{{ orderInfo.payDate }}</p>
        <p v-if="orderInfo.status=='1'">付款方式：<span>{{ orderInfo.paymentTypeStr }}</span></p>
        <!--        <p>交易流水号：{{orderInfo.id}}</p>-->
        <p>订单状态：
          <!-- 0  未支付  1  支付成功   2  已取消  3  已退订 -->
          <span v-if="orderInfo.status=='0'">未支付</span>
          <span v-if="orderInfo.status=='1'||orderInfo.status=='5'" class="text-success">支付成功</span>
          <span v-if="orderInfo.status=='2'" class="text-warning">已取消</span>
          <span v-if="orderInfo.status=='3'||orderInfo.status=='4'" class="text-danger">已退订</span>
          <span v-if="orderInfo.status=='7'" class="text-warning">退款审核中</span>
        </p>

      </el-col>
    </el-row>

  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { getOrderById, getRestaurantlById } from '@/api/logex/order'

const show = ref(false)
const fdInfo = ref({})
const foodList = ref([])
const orderInfo = ref({})

function open(order) {
  getRestaurantlById(order.extId).then(res => {
    fdInfo.value = res.data
  })

  getOrderById(order.id).then(res => {
    orderInfo.value = res.data
    foodList.value = JSON.parse(res.data.message).foodsList
  })

  show.value = true
}

defineExpose({
  open
})

</script>

<style scoped lang="scss">
dt{font-size: 16px;display: flex;justify-content: space-between;width: 50%;}
dd{display: flex;justify-content: space-between;width: 50%;}
.table{border-left: 1px solid #e1e1e1;border-top: 1px solid #e1e1e1;width: 100%;margin-bottom: 20px;
  th{background: #f8f8f8;width: 160px;}
  th,td{border-right: 1px solid #e1e1e1;border-bottom: 1px solid #e1e1e1;
    padding:10px;
  }
}
</style>
